<html>
<head>
<title>jsColorPallet Example</title>

<link rel="stylesheet" type="text/css" href="jsColorPallet.css" />
<script src="prototype.js" type="text/javascript"></script>
<script src="jsColorPalletLoader.js" type="text/javascript"></script>
</head>
<body>
<h1>jsColorPallet Example</h1>
<p>This is a very simple example of how to setup jsColorPallet. For more information on jsColorPallet please visit http://jsColorPallet.com. Thanks for downloading and trying this wounderfull Open Source Color Pallet System.</p>
<form id="colorPalletForm">
<div>
	<div style="float:left; width:150px;">Background Color:</div>
	<div style="float:left;"><input type="text" id="background" /></div>
	<div style="clear:both;"></div>
</div>
<div>
	<div style="float:left; width:150px;">Forground Color:</div>
	<div style="float:left;"><input type="text" id="forground" /></div>
	<div style="clear:both;"></div>
</div>
<div>
	<div style="float:left; width:150px;">Other Value 2:</div>
	<div style="float:left;"><input type="text" id="other2" /></div>
	<div style="clear:both;"></div>
</div>
<div>
	<div style="float:left; width:150px;">Text Color:</div>
	<div style="float:left;"><input type="text" id="text" /></div>
	<div style="clear:both;"></div>
</div>
<div>
	<div style="float:left; width:150px;">Other Value:</div>
	<div style="float:left;"><input type="text" id="other" onfocus="alert('Test Focus Event on Non Color Pallet Element');" /></div>
	<div style="clear:both;"></div>
</div>
</form>
<div id="TestAppend"></div>
<script type="text/javascript">
	var options = {
		title: 'jsColorPallet Example',
		forms: ['colorPalletForm'],
		fields: [
			{
				field: 'background', 
				title: 'Background'
			}, 
			{
				field: 'forground',
				title: 'Forground',
				callback: function(color){alert('Callback Example - Recieved Color: '+ color);}
			}, 
			{	
				field: 'text'
			}
		],
		callback: function(color){alert('Global Callback example - Color: '+ color);},
		debug: false
	}
	var colorPallet = new jsColorPallet(options);
</script>

</body>
</html>